window.addEventListener("load", function () {
    let lis = document.querySelectorAll("li");
    let audio = document.querySelector("audio");
    lis.forEach((value) => {
        value.addEventListener("mousedown", function () {
            if (this.innerText == "A") {
                this.style.borderColor = "rgb(250, 234, 5)";
                this.style.transform = "scale(1.1)";
                audio.src = "./music/A.wav";
            }
            if (this.innerText == "S") {
                this.style.borderColor = "rgb(250, 234, 5)";
                this.style.transform = "scale(1.1)";
                audio.src = "./music/S.wav";
            }
            if (this.innerText == "D") {
                this.style.borderColor = "rgb(250, 234, 5)";
                this.style.transform = "scale(1.1)";
                audio.src = "./music/D.wav";
            } if (this.innerText == "F") {
                this.style.borderColor = "rgb(250, 234, 5)";
                this.style.transform = "scale(1.1)";
                audio.src = "./music/F.wav";
            } if (this.innerText == "G") {
                this.style.borderColor = "rgb(250, 234, 5)";
                this.style.transform = "scale(1.1)";
                audio.src = "./music/G.wav";
            } if (this.innerText == "H") {
                this.style.borderColor = "rgb(250, 234, 5)";
                this.style.transform = "scale(1.1)";
                audio.src = "./music/H.wav";
            } if (this.innerText == "J") {
                this.style.borderColor = "rgb(250, 234, 5)";
                this.style.transform = "scale(1.1)";
                audio.src = "./music/J.wav";
            }
            if (this.innerText == "K") {
                this.style.borderColor = "rgb(250, 234, 5)";
                this.style.transform = "scale(1.1)";
                audio.src = "./music/K.wav";
            } if (this.innerText == "L") {
                this.style.borderColor = "rgb(250, 234, 5)";
                this.style.transform = "scale(1.1)";
                audio.src = "./music/L.wav";
            }




        })
        value.addEventListener("mouseup", function () {
            this.style.borderColor = "rgb(0, 0, 0)";
            this.style.transform = "scale(1)";

        })




    })
    document.addEventListener("keydown", function (e) {
        lis.forEach(function (value) {
            if (e.key.toUpperCase() == value.innerText) {
                value.style.borderColor = "rgb(250, 234, 5)";
                value.style.transform = "scale(1.1)";
            }

        });


        if (e.key.toUpperCase() == 'A') {
            audio.src = "./music/A.wav";
        }
        if (e.key.toUpperCase() == 'S') {
            audio.src = "./music/S.wav";
        } if (e.key.toUpperCase() == 'D') {
            audio.src = "./music/D.wav";
        } if (e.key.toUpperCase() == 'F') {
            audio.src = "./music/F.wav";
        } if (e.key.toUpperCase() == 'G') {
            audio.src = "./music/G.wav";
        } if (e.key.toUpperCase() == 'H') {
            audio.src = "./music/H.wav";
        } if (e.key.toUpperCase() == 'J') {
            audio.src = "./music/J.wav";
        } if (e.key.toUpperCase() == 'K') {
            audio.src = "./music/K.wav";
        } if (e.key.toUpperCase() == 'L') {
            audio.src = "./music/L.wav";
        }



    });

    document.addEventListener("keyup", function (e) {
        lis.forEach(function (value) {
            if (e.key.toUpperCase() == value.innerText) {
                value.style.borderColor = "rgb(0, 0, 0)";
                value.style.transform = "scale(1)";
            }

        });
    });


});